﻿@model CourseSelectionStudent
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>评价课程</title>
    <style type="text/css">
        body {
			margin: 0
		}
		.panel {
			background: #fff;
			padding: 0 20px;
		}
		.title {
			height: 50px;
			line-height: 50px;
			font-size: .25rem;
			border-bottom: 1px solid #eee;
		}
		.divider {
			height: 10px;
			background: #eee;
		}
		.row {
			height: 50px;
			line-height: 50px;
			font-size: .25rem;
		}
		.hd_1 {
			color: #999;
			margin-right: 20px;
		}
		.hd {
			display: inline-block;
			width: 2rem;
			color: #999;
		}
		.txt {
			padding: 10px 0;
			border-top: 1px solid #eee;
			font-size: .25rem;
			color: #999;
		}
		.star_1, .star_2, .star_3 {
			display: inline-block;
			background: url(./img/StarFull.png);
			width: .4rem;
			height: .4rem;
			background-size: 100% 100%;
			vertical-align: middle;
			margin-top: -.1rem;
		}
        /*		.star_1 {
			width: .34rem;
			height: .34rem;
		}*/
		.star_2 {
			background: url(./img/StarHalf.png);
			background-size: 100% 100%;
		}
		.star_3 {
			background: url(./img/StarEmpty.png);
			background-size: 100% 100%;
		}
    </style>

    <script type="text/javascript">
        (function () {
            var docEl = document.documentElement;
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            var recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 640) {
                        docEl.style.fontSize = '100px';
                    } else{
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                };
            if (!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
            recalc();
        })()
    </script>
</head>
<body>
	<div class="panel">
		<div class="title">上课详情</div>
		<div class="row">
			<span class="hd_1">课程</span>
			<span>@Model.Selection.Course.CourseName</span>
		</div>
		<div class="row">
			<span class="hd_1">老师</span>
			<span>@Model.Selection.Teacher.TeacherName</span>
		</div>
		<div class="row">
			<span class="hd_1">日期</span>
			<span>@Model.Selection.CourseDate.ToString("yyyy-MM-dd")</span>
		</div>
	</div>
	<div class="divider"></div>
	<div class="panel">
		<div class="title">老师点评</div>
		@foreach (var item in Model.Evaluates)
		{
    <div class="row">
        @{
            switch (item.Item)
            {
                case "Discipline":
                    <span class="hd">课堂纪律</span>
                    break;
                case "Practical":
                    <span class="hd">动手能力</span>
                    break;
                case "Concentration":
                    <span class="hd">专注力</span>
                    break;
                case "Logic":
                    <span class="hd">逻辑思维能力</span>
                    break;
                case "Communication":
                    <span class="hd">表达沟通能力</span>
                    break;
                default:
                    <span class="hd">其他</span>
                    break;
            }
            switch (item.Score)
            {
                case 0:
                    <span class="star_3"></span><span class="star_3"></span><span class="star_3"></span><span class="star_3"></span><span class="star_3"></span>
                    break;
                case 1:
                    <span class="star_2"></span><span class="star_3"></span><span class="star_3"></span><span class="star_3"></span><span class="star_3"></span>
                    break;
                case 2:
                    <span class="star_1"></span><span class="star_3"></span><span class="star_3"></span><span class="star_3"></span><span class="star_3"></span>
                    break;
                case 3:
                    <span class="star_1"></span><span class="star_2"></span><span class="star_3"></span><span class="star_3"></span><span class="star_3"></span>
                    break;
                case 4:
                    <span class="star_1"></span><span class="star_1"></span><span class="star_3"></span><span class="star_3"></span><span class="star_3"></span>
                    break;
                case 5:
                    <span class="star_1"></span><span class="star_1"></span><span class="star_2"></span><span class="star_3"></span><span class="star_3"></span>
                    break;
                case 6:
                    <span class="star_1"></span><span class="star_1"></span><span class="star_1"></span><span class="star_3"></span><span class="star_3"></span>
                    break;
                case 7:
                    <span class="star_1"></span><span class="star_1"></span><span class="star_1"></span><span class="star_2"></span><span class="star_3"></span>
                    break;
                case 8:
                    <span class="star_1"></span><span class="star_1"></span><span class="star_1"></span><span class="star_1"></span><span class="star_3"></span>
                    break;
                case 9:
                    <span class="star_1"></span><span class="star_1"></span><span class="star_1"></span><span class="star_1"></span><span class="star_2"></span>
                    break;
                case 10:
                    <span class="star_1"></span><span class="star_1"></span><span class="star_1"></span><span class="star_1"></span><span class="star_1"></span>
                    break;
            }
        }

    </div>
		}
		<div class="txt">
			@Model.Evaluation
        </div>
	</div>
</body>
</html>
